<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData()"
      @reset="initData()"
    />
    <div class="mb-2">
      <btnExport
        :exportApi="exportApi"
        :queryform="getQueryParam()"
        download-name="系统操作日志"
      />
    </div>
    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    />
  </main-box>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";

import btnExport from "@/components/btnExport/index.vue";
import { listApi, exportApi } from "@/api/system/operlog";

/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "时间",
    prop: "time",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "操作人",
    prop: "searchValue"
  }
];

const queryform = ref({ time: [] as any, searchValue: "" });

const getQueryParam = () => {
  const params = { ...queryform.value } as any;
  if (params.time && params.time.length) {
    params.params = {
      startTime: queryform.value.time[0],
      endTime: queryform.value.time[1]
    };
  }
  delete params.time;
  return params;
};

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  { prop: "operTime", label: "时间" },
  {
    prop: "userNickName",
    label: "用户",
    formatter: row => row.userNickName ?? row.userName
  },
  {
    prop: "businessType",
    label: "操作详情",
    formatter: ({ businessType, description }) => {
      // 业务类型（0其它 1新增 2修改 3删除 4授权 5导出 6导入 10登录 11退出登录）
      const types = [
        "其它",
        "新增",
        "修改",
        "删除",
        "授权",
        "导出",
        "导入",
        "登录",
        "退出登录"
      ];
      return `${types[businessType] ? `【${types[businessType]}】` : ""}${description ?? ""}`;
    }
  }
];

const initData = async (needInit = true) => {
  loading.value = true;
  if (needInit) {
    pagination.currentPage = 1;
  }
  await listApi({ pageNum: 1, pageSize: 10, ...getQueryParam() }).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
  loading.value = false;
};

initData();
</script>
